<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="form">
      <el-form-item label="名称" prop="wareName">
        <el-input v-model="form.wareName" placeholder="请输入仓库名"></el-input>
      </el-form-item>
      <el-form-item label="总容量" prop="wareContains">
        <el-input v-model="form.wareContains" placeholder="请输入总货架数"></el-input>
      </el-form-item>
      <el-form-item label="剩余容量" prop="wareFree">
        <el-input v-model="form.wareFree" placeholder="请输入空闲货架数"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="wareAddress">
        <el-input v-model="form.wareAddress" placeholder="请输入仓库地址"></el-input>
      </el-form-item>
      <el-form-item label="是否隐藏" prop="wareHidden">
        <el-switch v-model="form.wareHidden"></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {warehouseAdd, warehouseEdit, warehouseInfo, warehouseList} from '@/api/user'
export default {
  data() {
    return {
      form: {
        wareId: this.$route.query.id || '',
        wareName: '',
        wareContains: '',
        wareFree: '',
        wareAddress: '',
        wareHidden: false,
      },
      rules: {
        wareName: [
          { required: true, message: '请输入仓库名', trigger: 'change' }
        ],
        wareContains: [
          { required: true, message: '请输入仓库容量', trigger: 'change' }
        ],
        wareFree: [
          { required: true, message: '请输入仓库剩余空间', trigger: 'change' }
        ],
        wareAddress: [
          { required: true, message: '请输入仓库地址', trigger: 'change' }
        ],
        wareHidden: [
          { required: true, trigger: 'change' }
        ],
      }
    }
  },
  created() {
    console.log(this.$route.query.id)
    if (this.form.wareId) {
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      warehouseInfo({ wareId: this.form.wareId }).then(res => {
        res.data.wareHidden = 1 ? false : true
        this.form = res.data
      })
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form.wareId);
          if (this.form.wareId) {
            console.log(1)
            this.form.wareHidden = this.form.wareHidden ? 1 : 0
            warehouseEdit(this.form).then(res => {
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.$router.push({ name: 'WarehouseInfo' })
            })
          } else {
            console.log(2)
            this.form.wareHidden = this.form.wareHidden ? 1 : 0
            warehouseAdd(this.form).then(res => {
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.$router.push({ name: 'WarehouseInfo' })
            })
          }
        }
      });
    },
    onCancel() {
      this.$router.push({ name: 'WarehouseInfo' })
    }
  }
}
</script>
<style lang="scss">
.container {
  padding: 50px;
  display: flex;
  justify-content: center;
  .form {
    width: 700px;
  }
}
</style>
